/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useState} from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableOpacity,
  Linking,
} from 'react-native';
import NewsPage from './NewsPage';
import ImageViewer from './ImageViewer';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

type ButtonProps = {
  title: string;
  onPress: () => void;
  style?: any;
};

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function ActionButton({title, onPress, style}: ButtonProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <TouchableOpacity
      style={[
        styles.button,
        {
          backgroundColor: isDarkMode ? '#007AFF' : '#007AFF',
        },
        style,
      ]}
      onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const [currentPage, setCurrentPage] = useState<'home' | 'news' | 'image'>('home');
  const [selectedImageUrl, setSelectedImageUrl] = useState<string>('');

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const handleGitCodePress = () => {
    Linking.openURL('https://gitcode.com/oh-react-native');
  };

  const handleDocsPress = () => {
    Linking.openURL('https://gitcode.com/oh-react-native/docs');
  };

  const handleCommunityPress = () => {
    Linking.openURL('https://gitcode.com/oh-react-native/docs');
  };

  const handleNewsPress = () => {
    setCurrentPage('news');
  };

  const handleBackToHome = () => {
    setCurrentPage('home');
  };

  const handleNavigateToImage = (imageUrl: string) => {
    setSelectedImageUrl(imageUrl);
    setCurrentPage('image');
  };

  const handleBackFromImage = () => {
    setCurrentPage('news');
    setSelectedImageUrl('');
  };

  if (currentPage === 'news') {
    return <NewsPage onBackToHome={handleBackToHome} onNavigateToImage={handleNavigateToImage} />;
  }

  if (currentPage === 'image') {
    return <ImageViewer imageUrl={selectedImageUrl} onBack={handleBackFromImage} />;
  }

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View style={styles.header}>
          <Text style={[styles.headerTitle, { color: isDarkMode ? Colors.white : Colors.black }]}>
            🥜 oh-react-native
          </Text>
          <Text style={[styles.headerSubtitle, { color: isDarkMode ? Colors.light : Colors.dark }]}>
            鸿蒙跨平台开发社区
          </Text>
          <Text style={[styles.welcomeText, { color: isDarkMode ? Colors.light : Colors.dark }]}>
            CitCode 欢迎你
          </Text>
        </View>
        
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="鸿蒙版RN社区">
             鸿蒙 RN 生态的未来，不是 "一个人走得快"，而是 "一群人走得远"。期待与你一起，以 React Native 为桥，让跨平台开发更简单，让鸿蒙生态更繁荣！
           
          </Section>
          
          <Section title="技术特色">
            🚀 基于 React Native 0.72+ 版本，完美支持鸿蒙系统
            📱 一套代码，多端运行：Android、iOS、HarmonyOS
            🔧 丰富的组件库和 API 适配
            ⚡ 高性能渲染，原生体验
            🛠️ 完善的开发工具链支持
            📚 详细的文档和示例代码
          </Section>

          <Section title="社区数据">
            📊 上架鸿蒙原生应用：18 款
            📦 三方库适配：72 个
            👥 社区开发者：500+ 人
            🌟 GitHub Stars：1000+
            📖 文档访问量：10万+
            🎯 覆盖城市：北京、上海、广州、深圳、南京、杭州、苏州、宁夏
          </Section>

          <Section title="诚挚邀请">
            现在，我们诚挚邀请您：
            
            • 若您是 RN 开发者，带着您熟悉的库加入适配，让千万行代码在鸿蒙上焕发新生；
            
            • 若您是鸿蒙爱好者，学习 RNOH 技术，为生态注入新鲜血液；
            
            • 若您是企业开发者，将业务场景与适配需求结合，让产品抢先布局鸿蒙市场。
            
            让我们以 React Native 为桥，用协作与创新，共同打造鸿蒙跨平台生态的美好未来！
          </Section>

          <Section title="快速开始">
            <View style={styles.buttonContainer}>
              <ActionButton
                title="📚 查看文档"
                onPress={handleDocsPress}
                style={styles.primaryButton}
              />
              <ActionButton
                title="🐙 GitCode"
                onPress={handleGitCodePress}
                style={styles.secondaryButton}
              />
              <ActionButton
                title="👥 加入社区"
                onPress={handleCommunityPress}
                style={styles.secondaryButton}
              />
            </View>
          </Section>

          <Section title="每日早报">
            <View style={styles.buttonContainer}>
              <ActionButton
                title="📰 查看早报"
                onPress={handleNewsPress}
                style={styles.newsButton}
              />
            </View>
          </Section>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  header: {
    alignItems: 'center',
    paddingVertical: 40,
    paddingHorizontal: 24,
  },
  headerTitle: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  headerSubtitle: {
    fontSize: 18,
    fontWeight: '500',
    marginBottom: 12,
  },
  welcomeText: {
    fontSize: 16,
    fontWeight: '400',
    fontStyle: 'italic',
  },
  sectionContainer: {
    marginTop: 24,
    paddingHorizontal: 24,
    paddingBottom: 16,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 12,
  },
  sectionDescription: {
    fontSize: 16,
    fontWeight: '400',
    lineHeight: 24,
  },
  buttonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginTop: 16,
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    marginBottom: 12,
    minWidth: '30%',
    alignItems: 'center',
  },
  primaryButton: {
    backgroundColor: '#007AFF',
    flex: 1,
    marginRight: 8,
  },
  secondaryButton: {
    backgroundColor: '#34C759',
    flex: 1,
    marginLeft: 4,
  },
  newsButton: {
    backgroundColor: '#FF6B6B',
    flex: 1,
  },
  buttonText: {
    color: 'white',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default App;
